<template>
    <!-- packageMy/myAppointment/myAppointment.wxml -->
    <view>
        <view class="headTitle">
            <view :class="'headTitleTxt ' + (activeIndex == 1 ? 'headTitleTxtActive1' : '')" data-index="1" @tap="changeTab">活动报名</view>
            <view :class="'headTitleTxt ' + (activeIndex == 2 ? 'headTitleTxtActive2' : '')" data-index="2" @tap="changeTab">空间预约</view>
        </view>
        <!-- <view wx:if="{{activeList.length==0}}" class="myActivity-none">
    <image src="/assets/img/weicanjiahuodong.png" mode="widthFix"></image>
    <view class="tipinfo">您还未参加任何活动</view>
    <view class="back" bindtap="goActive">去参加</view>
  </view> -->
        <view class="content-block">
            <view v-if="activeIndex == 1 && activeList.length > 0" class="myActivity">
                <view class="blank"></view>
                <view class="myActivity-item" :data-id="item.id" @tap="goDetail" v-for="(item, index) in activeList" :key="index">
                    <image class="mainImg" :src="item.picture[0]" mode="widthFix"></image>

                    <view class="myActivity-item-right">
                        <view class="myActivity-item-title">{{ item.topic }}</view>
                        <view class="myActivity-item-bottom">
                            <view class="myActivity-item-status">
                                <view class="myActivity-item-info" v-if="item.createName">{{ item.createName }}发布</view>
                                <!-- <view class="myActivity-item-num">
                <text class="num num1"  wx:if="{{item.activityAppShowStatus==1}}" >可报名</text>
                <text class="num num2" wx:elif="{{item.activityAppShowStatus==2}}">已报名</text>
                <text class="num num3" wx:elif="{{item.activityAppShowStatus==3}}">报名截止</text>
                <text class="num num4" wx:elif="{{item.activityAppShowStatus==4}}">人数已满</text>
                <text class="num num5" wx:elif="{{item.activityAppShowStatus==5}}">无需报名即可参加</text>
              </view> -->
                            </view>
                            <view class="myActivity-item-info">{{ item.activityBeginTime }}-{{ item.activityEndTime }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else-if="activeIndex == 2 && spaceList.length > 0" class="myActivity">
                <view class="blank"></view>
                <view class="myActivity-item" :data-id="item.id" :data-placeid="item.placeId" @tap="goDetail" v-for="(item, index) in spaceList" :key="index">
                    <image class="mainImg" :src="item.pic" mode="widthFix"></image>

                    <view class="myActivity-item-right">
                        <view class="myActivity-item-title">{{ item.placeName }}</view>
                        <view>
                            <image v-if="item.placeTypeName == '运动'" class="placeTypeNameImg" mode="widthFix" src="/static/assets/img/place_yundong.png"></image>
                            <image v-else-if="item.placeTypeName == '教育'" class="placeTypeNameImg" mode="widthFix" src="/static/assets/img/place_jiaoyu.png"></image>
                            <image v-else-if="item.placeTypeName == '会议'" class="placeTypeNameImg" mode="widthFix" src="/static/assets/img/place_huiyi.png"></image>
                            <image v-else-if="item.placeTypeName == '活动'" class="placeTypeNameImg" mode="widthFix" src="/static/assets/img/place_huodong.png"></image>
                            <image v-else-if="item.placeTypeName == '直播'" class="placeTypeNameImg" mode="widthFix" src="/static/assets/img/place_zhibo.png"></image>
                            <image v-else class="placeTypeNameImg" mode="widthFix" src="/static/assets/img/place_qita.png"></image>
                            <span class="placeTypeNameTxt appoint-item-placeTypeName">{{ item.placeTypeName }}</span>
                        </view>
                        <view class="myActivity-item-bottom">
                            <view class="myActivity-item-status">
                                <!-- <view class="myActivity-item-info">{{item.address}}</view> -->
                                <view class="myActivity-item-num">
                                    <!-- <text class="num num1">已预约</text> -->
                                </view>
                            </view>
                            <view class="myActivity-item-info">{{ item.startTime }}-{{ item.endTime }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <noData v-else />
        </view>
    </view>
</template>

<script>
// packageMy/myAppointment/myAppointment.js
const app = getApp();

const api = require('../../utils/api.js');
export default {
    data() {
        return {
            activeIndex: 1,
            //1:我的  2全部
            status: 1,
            activeList: [
                {
                    src: '',
                    topic: '积善之家社区老年人文化活动',
                    activityAppShowStatus: '1',
                    maxNumber: '50',
                    points: '50',
                    pubCustNickName: 'XX小区发布',
                    activeStartTime: '2021/5/20 14:00',
                    activeEndTime: '2021/5/20 16:00'
                },
                {
                    src: '',
                    topic: '居家中小学生居家育苗助童项目计划',
                    activityAppShowStatus: '2',
                    maxNumber: '人员已满',
                    points: '50',
                    pubCustNickName: 'XX小区发布',
                    activeStartTime: '2021/5/20 14:00',
                    activeEndTime: '2021/5/20 16:00'
                },
                {
                    src: '',
                    topic: '积善之家社区老年人文化活动',
                    activityAppShowStatus: '3',
                    maxNumber: '50',
                    points: '50',
                    pubCustNickName: 'XX小区发布',
                    activeStartTime: '2021/5/20 14:00',
                    activeEndTime: '2021/5/20 16:00'
                },
                {
                    src: '',
                    topic: '居家中小学生居家育苗助童项目计划',
                    activityAppShowStatus: '4',
                    maxNumber: '人员已满',
                    points: '50',
                    pubCustNickName: 'XX小区发布',
                    activeStartTime: '2021/5/20 14:00',
                    activeEndTime: '2021/5/20 16:00'
                },
                {
                    src: '',
                    topic: '居家中小学生居家育苗助童项目计划',
                    activityAppShowStatus: '5',
                    maxNumber: '人员已满',
                    points: '50',
                    pubCustNickName: 'XX小区发布',
                    activeStartTime: '2021/5/20 14:00',
                    activeEndTime: '2021/5/20 16:00'
                }
            ],
            activeList: [],
            spaceList: [
                {
                    src: '',
                    topic: '积善之家社区老年人文化活动',
                    placeType: 1,
                    placeTypeName: '运动',
                    activityAppShowStatus: '1',
                    maxNumber: '50',
                    points: '50',
                    pubCustNickName: 'XX小区发布',
                    activeStartTime: '2021/5/20 14:00',
                    activeEndTime: '2021/5/20 16:00'
                },
                {
                    src: '',
                    topic: '居家中小学生居家育苗助童项目计划',
                    placeType: 2,
                    placeTypeName: '会议',
                    activityAppShowStatus: '2',
                    maxNumber: '人员已满',
                    points: '50',
                    pubCustNickName: 'XX小区发布',
                    activeStartTime: '2021/5/20 14:00',
                    activeEndTime: '2021/5/20 16:00'
                },
                {
                    src: '',
                    topic: '积善之家社区老年人文化活动',
                    placeType: 3,
                    placeTypeName: '教育',
                    activityAppShowStatus: '3',
                    maxNumber: '50',
                    points: '50',
                    pubCustNickName: 'XX小区发布',
                    activeStartTime: '2021/5/20 14:00',
                    activeEndTime: '2021/5/20 16:00'
                }
            ],
            spaceList: [],
            elementId: '',
            pageNumber: 1
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // this.getData()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getData();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        //调用刷新时将执行的方法
        this.onRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {
        // 若不是最后一页，则将当前页数增加1，获取数据
        this.setData({
            pageNumber: this.pageNumber + 1
        });
        this.getData();
    },
    /**
     * 用户点击右上角分享
     */ methods: {
        changeTab(event) {
            let index = event.currentTarget.dataset.index;
            this.setData({
                activeIndex: index || 1
            });

            if (index == 1) {
                this.getActive();
            } else {
                this.getSpaceList();
            }
        },

        goDetail(e) {
            const { id, placeid } = e.currentTarget.dataset;

            if (this.activeIndex == 1) {
                uni.navigateTo({
                    url: '/pages/activeOrder2/activeOrder2?id=' + id
                });
            } else {
                uni.navigateTo({
                    url: '/pages/spaceOrder2/spaceOrder2?id=' + placeid + '&orderId=' + id
                });
            }
        },

        getActive() {
            uni.$post(`${api.myActivity}?identityId=${uni.getStorageSync('identityId')}`)
                .then((res) => {
                    //请求成功
                    if (res.code == '00000') {
                        let list = [];
                        list = res.data;
                        this.setData({
                            activeList: list
                        });
                    } else {
                        this.setData({
                            activeList: []
                        });
                        uni.showToast({
                            title: res.message || '服务器出小差了',
                            icon: 'none'
                        });
                    }

                    uni.hideNavigationBarLoading(); //完成停止加载

                    uni.stopPullDownRefresh(); //停止下拉刷新
                })
                .catch((err) => {
                    //请求失败
                });
        },

        getSpaceList() {
            uni.$post(`${api.myReserve}?custId=${uni.getStorageSync('custId')}`)
                .then((res) => {
                    //请求成功
                    if (res.code == 0) {
                        let list = [];
                        list = res.data;
                        this.setData({
                            spaceList: list
                        });
                    } else {
                        this.setData({
                            spaceList: []
                        });
                        uni.showToast({
                            title: res.message || '服务器出小差了',
                            icon: 'none'
                        });
                    }

                    uni.hideNavigationBarLoading(); //完成停止加载

                    uni.stopPullDownRefresh(); //停止下拉刷新
                })
                .catch((err) => {
                    //请求失败
                });
        },

        getActiveStaff() {
            var param = {
                identityId: uni.getStorageSync('identityId'),
                staffUnionId: uni.getStorageSync('staffUnionId'),
                type: 4,
                pageInfo: {
                    pageNumber: this.pageNumber,
                    pageSize: 10
                }
            };
            uni.$post(api.findVoteAcitityListForWY, param)
                .then((res) => {
                    //请求成功
                    if (res.code == '00000') {
                        let list = [];

                        if (this.pageNumber == 1) {
                            // 若请求第一页，则直接赋值
                            list = res.busiInfo.elementList;
                        } else {
                            // 否则将获取的数据与原数组合并
                            list = this.activeList.concat(res.busiInfo.elementList);
                        }

                        this.setData({
                            activeList: list
                        });
                    } else {
                        uni.showToast({
                            title: res.message || '服务器出小差了',
                            icon: 'none'
                        });
                    }

                    uni.hideNavigationBarLoading(); //完成停止加载

                    uni.stopPullDownRefresh(); //停止下拉刷新
                })
                .catch((err) => {
                    //请求失败
                });
        },

        //刷新
        onRefresh() {
            //在当前页面显示导航条加载动画
            uni.showNavigationBarLoading();
            this.setData({
                pageNumber: 1
            });
            this.getData();
        },

        getData() {
            if (this.activeIndex == 1) {
                if (uni.getStorageSync('role_type') == 1) {
                    this.getActive();
                } else if (uni.getStorageSync('role_type') == 2) {
                    this.getActiveStaff();
                }
            } else {
                this.getSpaceList();
            }
        }
    }
};
</script>
<style>
@import './myAppointment.css';
</style>
